<template>
	<div class="gyroscope">
		<canvas :id="id" :canvas-id="id" :ref="id" :style="`width: ${width}px;height: ${height}px;`"></canvas>
		<div class="nums">
			<div class="num">x: {{ angle.x || 0 }}</div>
			<div class="num">y: {{ angle.y || 0 }}</div>
			<div class="num">z: {{ angle.z || 0 }}</div>
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted,
		watchEffect,
	} from "vue"
	import {
		useCubeStore
	} from "@/stores/cube.js";
	const cubeStore = useCubeStore();
	
	const angle = ref({})
	
	const width = 260
	const height = 260
	const space = 30
	const lineLong = width - space * 2
	const id = "g-sys"
	const lineColor = '#2e5f7f'
	const radian = ((2 * Math.PI) / 360) * 45 // y轴倾斜弧度
	
	let ctx = null
	
	// 初始化canvas
	const initCanvas = () => {
		ctx.setLineWidth(2);
		ctx.setLineDash([])
		ctx.setStrokeStyle(lineColor);
		ctx.setFillStyle(lineColor)
		ctx.setFontSize(18)
		
		ctx.beginPath();
		
		// x轴
		const xbx = space
		const xby = height / 2
		const xex = width - space
		const xey = xby
		ctx.moveTo(xbx, xby)
		ctx.lineTo(xex, xey)
		ctx.moveTo(xex, xey)
		ctx.lineTo(xex - 4, xey - 4)
		ctx.moveTo(xex, xey)
		ctx.lineTo(xex - 4, xey + 4)
		ctx.fillText('x', xex - 15, xey + 15)
		
		// y轴
		const yOppositeSlide = Math.sin(radian) * (lineLong / 2) //斜角对边长度
		const yAdjacentSlide = Math.cos(radian) * (lineLong / 2) //斜角邻边长度
		const ybx = space + lineLong / 2 - yAdjacentSlide
		const yby = height / 2 + yOppositeSlide
		const yex = space + lineLong / 2 + yAdjacentSlide
		const yey = height / 2 - yOppositeSlide
		ctx.moveTo(ybx, yby)
		ctx.lineTo(yex, yey)
		ctx.moveTo(yex, yey)
		ctx.lineTo(yex - 6, yey)
		ctx.moveTo(yex, yey)
		ctx.lineTo(yex, yey + 6)
		ctx.fillText('y', yex, yey + 20)
		
		// z轴
		const zbx = space + lineLong / 2
		const zby = lineLong + space
		const zex = zbx
		const zey = space
		ctx.moveTo(zbx, zby)
		ctx.lineTo(zex, zey)
		ctx.moveTo(zex, zey)
		ctx.lineTo(zex - 4, zey + 4)
		ctx.moveTo(zex, zey)
		ctx.lineTo(zex + 4, zey + 4)
		ctx.fillText('z', zex + 10, zey + 10)
		
		ctx.closePath();
		ctx.stroke();
	}
	
	const drawPoint = ({
		x, y, z
	}) => {
		x *= 100
		y *= 100
		z *= 100
		
		ctx.clearRect(0, 0, width, height)
		initCanvas()
		
		const xColor = '#0061F2'
		const yColor = '#FF6B00'
		const zColor = '#02B613'
		const z2Color = '#07ff00'
		const cColor = '#d502ff'
		const r = 4
		
		// xyz交汇坐标点
		const xslide =  Math.cos(radian) * y
		const yslide =  Math.sin(radian) * y
		const rx = xslide + space + lineLong / 2 + x
		const ry = height / 2 - z - yslide
		// xy坐标交汇点
		const sx = rx
		const sy = ry + z
		// x点坐标
		const xbx = space + lineLong / 2 + x
		const xby = height / 2
		// y点坐标
		const ybx = space + lineLong / 2 + xslide
		const yby = sy
		// z点坐标
		const zbx = space + lineLong / 2
		const zby = height / 2 - z
		
		ctx.setLineDash([8, 15]);
		
		// 绘制x
		ctx.beginPath();
		ctx.moveTo(xbx, xby)
		ctx.lineTo(sx, sy)
		ctx.setStrokeStyle(xColor);
		ctx.stroke();
		
		// 绘制y
		ctx.beginPath();
		ctx.moveTo(ybx, yby)
		ctx.lineTo(sx, sy)
		ctx.setStrokeStyle(yColor);
		ctx.stroke();
		
		// 绘制z
		ctx.beginPath();
		ctx.moveTo(sx, sy)
		ctx.lineTo(rx, ry)
		ctx.setStrokeStyle(zColor);
		ctx.stroke();
		ctx.beginPath();
		ctx.moveTo(rx, ry)
		ctx.lineTo(zbx, zby)
		ctx.setStrokeStyle(z2Color);
		ctx.stroke();
		
		// 绘制中心点
		ctx.beginPath();
		ctx.moveTo(width / 2, height / 2)
		ctx.lineTo(rx, ry)
		ctx.setStrokeStyle(cColor);
		ctx.stroke();
		
		ctx.closePath()
		
		ctx.arc(rx, ry, r, 0, 2 * Math.PI);
		ctx.setFillStyle('#D82020'); // 设置填充颜色
		ctx.fill()
		
		ctx.draw();
		angle.value = {x: x / 100, y: y / 100, z: z / 100}
	}
	
	watchEffect(() => {
		if (cubeStore.gyroscopeArr.length) {
			const item = [...cubeStore.gyroscopeArr][0]
			cubeStore.clearGyroscopesFisrt()
			drawPoint(item)
		}
	})
	
	onMounted(() => {
		ctx = uni.createCanvasContext(id)
		initCanvas()
		ctx.draw();
		
		// test
		// setTimeout(() => {
		// 	drawPoint({
		// 		"x": 0.8110281229019165,
		// 		"y": 0.36422568559646606,
		// 		"z": -0.45779162645339966,
		// 		"angle": 10353.3134765625
		// 	})
		// }, 100)
		
		// setTimeout(() => {
		// 	drawPoint({
		// 		"x": -0.8110281229019165,
		// 		"y": -0.36422568559646606,
		// 		"z": 0.45779162645339966,
		// 		"angle": 10353.3134765625
		// 	})
		// }, 200)
	})
</script>

<style lang="scss" scoped>
	.gyroscope {
		width: 200rpx;
		height: 200rpx;
		margin-right: 50rpx;
		margin-bottom: 150rpx;
		
		uni-canvas {
			transform: scale(0.6) translate(-30%, -50%);
		}
		
		.nums {
			margin-top: -280rpx;
		}
		
		.num {
			width: 500rpx;
			color: #666;
			font-size: 14px;
			word-break: break-all;
		}
	}
</style>